<template>
  <div v-loading="loading">
    <h4 class="attach-title mt-1">
      <div class="d-flex justify-content-between align-items-center">
        <div>调查附件</div>
        <div>
          <el-button type="text" @click="showAttach = !showAttach">
            <i :class="`fa fa-sort-${showAttach ? 'asc' : 'desc'}`"></i>
          </el-button>
        </div>
      </div>
    </h4>
    <hr />
    <div v-show="showAttach">
      <attach-scene
        :project-data="projectData"
        :view-mode="isView"
        @after-data="handleSceneAfterData"
        @success="handleSceneSuccess"
      ></attach-scene>
    </div>
    <h4 class="attach-title mt-4">
      <div class="d-flex justify-content-between align-items-center">
        <div>调查资料</div>
        <div>
          <el-button type="text" @click="showUploadAttach = !showUploadAttach">
            <i :class="`fa fa-sort-${showUploadAttach ? 'asc' : 'desc'}`"></i>
          </el-button>
        </div>
      </div>
    </h4>
    <hr />
    <div v-show="showUploadAttach">
      <attach-upload
        :tags="uploadTags"
        :batch-no="relatedId"
        :view-mode="isView"
        v-bind="$listeners"
        ref="upload"
        @after-data="handleAfterData"
      ></attach-upload>
    </div>
  </div>
</template>

<script>
import {
  enumPersonalTags,
  enumCompanyTags,
  hasAttachFinish,
  hasSceneMediaFinish,
  hasSceneImageFinish,
  hasSceneReportFinish,
} from '@/credit/views/city/self/normal/invest/attach'

import AttachUpload from '@/bank/components/attach/Upload'
import AttachScene from '@/credit/views/city/self/normal/invest/AttachScene'

export default {
  components: {
    AttachUpload,
    AttachScene,
  },
  props: {
    viewMode: Boolean,
    relatedId: String,
  },
  data() {
    return {
      loading: false,
      projectData: {},
      signData: {},
      attachs: [],
      showAttach: true,
      showUploadAttach: true,
    }
  },
  computed: {
    isCompany() {
      return +this.projectData.customer_type === 1
    },
    uploadTags() {
      return this.isCompany ? enumCompanyTags : enumPersonalTags
    },
    isView() {
      return this.viewMode
    },
    attachStatus() {
      return +this.projectData.invest_datum_status
    },
  },
  watch: {
    relatedId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      if (!this.relatedId || this.loading) return Promise.resolve()
      this.loading = true
      return Promise.all([this.getRelatedData()]).finally(() => {
        this.loading = false
      })
    },
    getRelatedData() {
      if (this.$refs.upload) {
        this.$refs.upload.init()
      }
      return this.$api
        .getData({
          table: 'customer_related',
          params: {
            'customer_related_id.eq': this.relatedId,
          },
        })
        .then(res => {
          this.projectData = res?.data?.[0] ?? {}
          this.$emit('status', this.attachStatus)
        })
    },

    handleAfterData({ list, emit }) {
      if (emit) {
        this.$emit('success', list)
      }
      this.attachs = list
      if (this.isView || !this.emit) return
      this.updateStatus()
    },

    handleSignTypeChange() {
      this.getData().then(() => this.updateStatus())
    },

    // 更新项目附件状态
    updateStatus() {
      // 判断附件状态
      const isAttachUpload = hasAttachFinish(this.attachs, this.projectData)

      // 现场音视频
      const isMediaUpload = hasSceneMediaFinish(this.attachs, this.projectData).finish

      // 调查图片
      const isImageUpload = hasSceneImageFinish(this.attachs, this.projectData).finish

      // 尽调报告
      const isReportUpload = hasSceneReportFinish(this.projectData).finish
      const isAllUpload = isAttachUpload && isMediaUpload && isImageUpload && isReportUpload
      const currentStatus = isAllUpload ? 1 : 0
      if (this.attachStatus === currentStatus) return
      this.updateAttachStatus(currentStatus)
    },

    // 更新状态
    updateAttachStatus(status) {
      this.$api
        .updateData({
          table: 'customer_related',
          id: this.relatedId,
          data: {
            invest_datum_status: status,
          },
        })
        .then(res => {
          this.getData()
          this.$emit('success', res)
          this.$emit('status', status)
        })
    },

    handleSceneAfterData({ list, emit }) {
      this.attachs = list
      if (emit) {
        this.$emit('success', list)
      }
      if (this.isView || !emit) return
      this.updateStatus()
    },
    handleSceneSuccess(res) {
      this.getData().finally(() => {
        this.updateStatus()
      })
      this.$emit('success', res)
    },
  },
}
</script>

<style lang="scss" scoped>
.attach-title {
  font-size: 1.1rem;
  font-weight: bold;
}
</style>
